<template>
<div class="rank">
    <div class="list" v-for="rank in topListData" :key="rank.title">
        <h3>{{rank.titile}}</h3>
        <div class="list-item" v-for="item in rank.list" :key="item.topId">
            <h5>{{item.lable}}</h5>
            <ul>
                <li v-for="playItem in item.song" :key="playItem.songId">
                    <span>{{playItem.title}}-{{playItem.singerName}}</span>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>

<script>
import axios from 'axios'
export default{
    data(){
        return{
            topListData:[]
        }
    },
    created(){
        this.getTopList()
    },
    methods:{
        getTopList(){
            axios.get("/jsososo/top/category?showDetail=1")
        }
    }
}
</script>
<style scoped>
.list-item{
    display:flex;
}
.item:nth-of-type(1){
    width:60%;
}
.item:nth-of-type(2){
    width:40%;
    text-align: right;
}
.item>img{
    width: 80%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.item{
    text-align: left;
}
.item>span{
    font-size: 18px;
    font-weight: 800;
}
.list-item{
    margin: 10px;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}
</style>
